<template lang="pug">
  Modal(v-model="createModal" title="添加沟通记录" width="700")
    Form(ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="130")
      FormItem(label="沟通时间：" prop="operateTime")
        DatePicker(v-model="formValidate.operateTime" type="datetime" placeholder="选择沟通时间" @on-change="dateChange" style="display:block")
      FormItem(label="沟通方式：" prop="communicationWay")
        Select(v-model="formValidate.communicationWay" :label-in-value="true"  placeholder="请选择" clearable @on-change="communicationWayChange")
          Option(v-for="(item, index) in communicationtype" :value="item.key" :key="index") {{ item.value }}
      FormItem(label="客户联系人：" prop="contactId")
        template(v-if="createModal")
          Select(v-model="formValidate.contactId" :label-in-value="true"  placeholder="请选择" clearable @on-change="contactChange")
            Option(v-for="(item, index) in contact_arr" :value="item.id" :key="index") {{ item.name }}
      FormItem(label="沟通记录：" prop="summary")
        Input(v-model="formValidate.summary" type="textarea" )
      FormItem(label="完成起始时间：" prop="completeBeginTime")
        DatePicker(:value="formValidate.completeBeginTime" type="datetime" format="yyyy-MM-dd HH:mm" placeholder="请选择" style="display:block" @on-change="completeBeginTimeChange")
      FormItem(label="完成结束时间：" prop="completeEndTime")
        DatePicker(:value="formValidate.completeEndTime" type="datetime" format="yyyy-MM-dd HH:mm" placeholder="请选择" style="display:block" @on-change="completeEndTimeChange")
    template(slot="footer")
      Button(@click="createModal = false") 取消
      Button(type="info" @click="handleSubmit('formValidate')") 确认添加
</template>

<script>
import HRDCCustomerApi from '@/api/HRDCCustomer.api.js'

export default {
  props: {
    customerId: String,
    contact_arr: Array,
    communicationtype: Array
  },
  data () {
    return {
      createModal: false,
      formValidate: {
        operateTime: '',
        communicationWay: '',
        communicationWayName: '',
        contactId: '',
        contactName: '',
        summary: '',
        completeBeginTime: '',
        completeEndTime: ''
      },
      ruleValidate: {
        operateTime: [
          { required: true, message: '沟通时间不能为空', trigger: 'change' }
        ],
        communicationWay: [
          { required: true, message: '沟通方式不能为空', trigger: 'change' }
        ],
        contactId: [
          { required: true, message: '沟通联系人不能为空', trigger: 'change' }
        ],
        summary: [
          { required: true, message: '沟通记录不能为空', trigger: 'blur' }
        ],
        completeBeginTime: [
          { required: true, message: '沟通起始时间不能为空', trigger: 'change' }
        ],
        completeEndTime: [
          { required: true, message: '沟通结束时间不能为空', trigger: 'change' }
        ]
      }
    }
  },
  created () {
    // this.getContactList()
  },
  methods: {
    creatOpen () {
      this.createModal = true
      this.ruleValidate.contactId = [
        { required: true, message: '沟通联系人不能为空', trigger: 'change' }
      ]
      // console.log(this.contact_arr)
    },
    // 添加沟通记录
    createCommunication () {
      HRDCCustomerApi.PostCommunication(Object.assign({ customerId: this.customerId }, this.formValidate)).then(res => {
        if (res.data.success) {
          this.$Message.success(res.data.message)
          this.createModal = false
          this.formValidate = {
            operateTime: '',
            communicationWay: '',
            communicationWayName: '',
            contactId: '',
            contactName: '',
            summary: '',
            completeBeginTime: '',
            completeEndTime: ''
          }
          this.$refs['formValidate'].resetFields()
        } else {
          this.$Message.error({
            content: res.data.message,
            duration: 10,
            closable: true
          })
        }
      })
    },
    // 保存按钮
    handleSubmit (name) {
      this.$refs[name].validate((valid) => {
        if (valid) {
          this.createCommunication()
        } else {
          this.$Message.warning('有必填项未填!')
        }
      })
    },
    dateChange (val) {
      // console.log(val)
      this.formValidate.operateTime = val
    },
    completeBeginTimeChange (val) {
      this.formValidate.completeBeginTime = val
    },
    completeEndTimeChange (val) {
      this.formValidate.completeEndTime = val
    },
    contactChange (val) {
      // console.log(val)
      if (val) {
        this.formValidate.contactName = val.label
      }
    },
    communicationWayChange (val) {
      // console.log(val)
      if (val) {
        this.formValidate.communicationWayName = val.label
      }
    }

  }
}
</script>

<style>

</style>
